<template>
  <div class="movie_body" >
	  			<Loading v-if="loading" />
				<ul v-else>
					<li v-for="movie in list" :key="movie.id" @click="clickHandler(movie.id)">
						<div class="pic_show"><img :src="movie.pic"></div>
						<div class="info_list">
							<h2>{{movie.title|short}}</h2>
							<p><span class="person">{{movie.want}}</span> 人想看</p>
							<p>{{movie.zhuyan}}</p>
							<p>{{movie.playtime}}</p>
						</div>
						<div class="btn_pre">
							预售
						</div>
					</li>

				</ul>
			</div>
		
</template>

<script>
import Loading from "@/components/Loading"
export default {
    name:'ComingSoon',
	data(){
		return {list:[],
		prevCityId:-1,
		loading:false
		
		}
	},
	components:{
		Loading
	},
	async created(){
		this.loading = true;
		let data = await this.$axios.get('/api/comingsoon?cityId='+this.$store.state.city.id);
		console.log(data);
		this.list = data.data;
		this.loading = false;
		
	},
	async activated(){
			this.loading = true;
			//组件生命周期钩子函数
			//如果上次id和本次id不同,重新请求
			let nextId = this.$store.state.city.id;
			if(nextId != this.prevCityId){
				let data = await this.$axios.get('/api/comingsoon?cityId='+nextId);
			// console.log(data);
				this.list = data.data;
				this.prevCityId = nextId;
			}
			this.loading = false;
		},
		methods:{
			clickHandler(id){
				this.$router.push('/movie/detail/2/'+id);
			}
		}
}
</script>

<style>
    #content .movie_body{ flex:1; overflow:auto;}
.movie_body ul{ margin:0 12px; overflow: hidden;}
.movie_body ul li{ margin-top:12px; display: flex; align-items:center; border-bottom: 1px #e6e6e6 solid; padding-bottom: 10px;}
.movie_body .pic_show{ width:64px; height: 90px;}
.movie_body .pic_show img{ width:100%;}
.movie_body .info_list { margin-left: 10px; flex:1; position: relative;}
.movie_body .info_list h2{ font-size: 17px; line-height: 24px; width:150px; overflow: hidden; white-space: nowrap; text-overflow:ellipsis;}
.movie_body .info_list p{ font-size: 13px; color:#666; line-height: 22px; width:200px; overflow: hidden; white-space: nowrap; text-overflow:ellipsis;}
.movie_body .info_list .grade{ font-weight: 700; color: #faaf00; font-size: 15px;}
.movie_body .info_list img{ width:50px; position: absolute; right:10px; top: 5px;}
.movie_body .btn_mall , .movie_body .btn_pre{ width:47px; height:27px; line-height: 28px; text-align: center; background-color: #f03d37; color: #fff; border-radius: 4px; font-size: 12px; cursor: pointer;}
.movie_body .btn_pre{ background-color: #3c9fe6;}

</style>